<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html" charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no">
    <title></title>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        docEl.style.fontSize = 60 * (clientWidth /750) + 'px';
                    };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

    </script>
    <style>
        /*图片img设为块级元素*/
        /*a链接设置为行内快级元素*/
        body, img, input, p, button, ul, li, dl, dt, dd {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            display:block;
        }
        a, button, input, textarea {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        input, textarea {
            -webkit-appearance: none;
        }
        body {
            font-family: 'microsoft yahei';
            position: relative;
        }
        li {
            list-style: none;
        }
        img {
            width: 100%;
            display: block;
        }
        input {
            display: inline-block;
            border: 0;
            outline: 0;
            font-family: 'microsoft yahei';
        }
        .hide {
            display: none;
        }
        .show {
            display: block;
        }
        .mask{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.5);
            z-index:5;
        }
        .mask>p{
            width:4.95rem;
            height:3.8rem;
            position:absolute;
            top:4rem;
            left:3.8rem;
        }
        .mask>div{
            width:9.57rem;
            margin:0 auto;
            margin-top:7.17rem;
            padding:0.5rem 0.74rem;
            border-radius:0.5rem;
            background:#00c0ff;
            overflow: hidden;
        }
        .phone_sure>div>p{
            margin-top:0.5rem;
            font-size:0.55rem;
            color:#fff;
            text-align:center;
        }
        input.phone {
            width:9.05rem;
            height: 1.4rem;
            margin-top:0.8rem;
            border-radius:0.3rem;
            padding-left: 5%;
            font-size: 0.45rem;
            float:left;
            background:#097cd5;
            color: #D6D0CA;
        }
        input::-webkit-input-placeholder {
            color: #D6D0CA;
        }
        　　input:-moz-placeholder {
            color: #D6D0CA ;
        }
        input.code {
            height: 1.4rem;
            border-radius:0.3rem;
            padding-left: 5%;
            font-size: 0.45rem;
            float:left;
            margin-top:0.5rem;
            background:#097cd5;
            color: #D6D0CA;
        }
        .get,.get_again {
            width:3.35rem;
            float:right;
            height: 1.4rem;
            line-height:1.4rem;
            font-size: 0.45rem;
            text-align: center;
            border-radius:0.3rem;
            background:#ffd200;
            color:#000;
            margin-top:0.5rem;
        }
        .put{
            width:6.25rem;
            height:1.4rem;
            line-height:1.4rem;
            border-radius:0.3rem;
            background:#ffd200;
            color:#000;
            font-size:0.55rem;
            text-align:center;
            float:left;
            margin-left:1.5rem;
            margin-top:0.5rem;
        }
    </style>
</head>
<body>
<div>
    <img src="images/help.png" alt="">
</div>
<!--用户登录弹窗-->
<div class="mask phone_bd">
    <p><img src="images/girl.png" alt=""></p>
    <div>
        <input class="phone" type="text" name="user_phone" placeholder="输入手机号" >
        <input class="code" type="text" name="user_code" placeholder="输入验证码">
        <a class="get">获取验证码</a>
        <a class="get_again hide"><span>60</span>秒后重新获取</a>
        <input id="submit" type="submit" class="put" value="确定"/>
    </div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script>
    //倒计时
    function resetCode(){
        $('.phone_bd .get').addClass('hide');
        $('.get_again>span').html('60');
        $('.get_again').removeClass('hide');
        var second = 60;
        var timer = null;
        timer = setInterval(function(){
            second -= 1;
            if(second >0){
                $('.get_again>span').html(second);
            }else{
                clearInterval(timer);
                $('.phone_bd .get').removeClass('hide');
                $('.get_again').addClass('hide');
            }
        },1000);
    }
    //*******获取验证码按钮
    $('.phone_bd .get').on('click',function(){
        resetCode();//调用倒计时功能
    });
    /**************这里没有做其他判断，即不获取验证码也能确定，这是要改的,如果需要加上index页上的判断请联系***************/
    $('#submit').on('click',function(){
        //随机数判断
        var ifgohome=Math.floor(Math.random()*2);
        if(ifgohome==0) {  //跳到p4-1页
            location.href='4-1.html';
        }else{   //跳到p4-3
            location.href='4-3.html';
        }
    });
</script>
</body>
</html>